import { h } from '@knno/dom/jsx';
import { Cell, CellProps } from '../../doc/cell';
import { Group } from '@knno/ui/jsx/group';
import { Radio } from '@knno/ui/jsx/radio';
import { checkboxStyle } from '../../doc/cell.css';
import IconUnchecked from '@mdi/svg/svg/checkbox-blank-outline.svg';
import IconChecked from '@mdi/svg/svg/checkbox-outline.svg';

export function checkbox(cell: Cell, attrs: CellProps) {
	if (attrs.checkType === 'boolean') {
		cell.addClass('checkbox').append(
			<Group
				onchange={function (evt) {
					evt.stopPropagation();
					cell.setValue(this.value()[0] === 'true');
				}}
				value={[cell.getValue() ? 'true' : 'false']}
			>
				<Radio
					disabled={attrs.readonly}
					class={checkboxStyle}
					value="true"
					facadeIcons={{ checked: IconChecked, unchecked: IconUnchecked }}
				>
					是
				</Radio>
				<Radio
					disabled={attrs.readonly}
					class={checkboxStyle}
					value="false"
					facadeIcons={{ checked: IconChecked, unchecked: IconUnchecked }}
				>
					否
				</Radio>
			</Group>
		);
	}
}
